import { FC, useState } from "react"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import "./index.scss"

interface IGame {}

const Game: FC<IGame> = () => {

    const { t } = useTranslation()

    const [ data ] = useState([
        {
            project: 'Metaverse Games',
            quantity: '1,000,000,000 SHUI',
            percentage: '48%',
            other: '游戏产出',
            color: '#8833F3'
        },
        {
            project: 'Free airdrop',
            quantity: '450,000,000 SHUI',
            percentage: '21%',
            other: '免费发放',
            color: '#3754F1'
        },
        {
            project: 'white list',
            quantity: '250,000,000 SHUI',
            percentage: '12%',
            other: '早期参与',
            color: '#1976F2'
        },
        {
            project: 'Task System',
            quantity: '229,000,000 SHUI',
            percentage: '11%',
            other: '任务奖励',
            color: '#199BF2'
        },
        {
            project: 'gold reserve',
            quantity: '100,000,000 SHUI',
            percentage: '5%',
            other: '公开兑换',
            color: '#19BEF2'
        },
        {
            project: 'SHUI DAO',
            quantity: '50,000,000 SHUI',
            percentage: '2%',
            other: '社区治理',
            color: '#19DEF2'
        },
        {
            project: 'Founding team',
            quantity: '21,000,000 SHUI',
            percentage: '1%',
            other: '条件释放',
            color: '#84F219'
        },
    ])

	return (
		<div id="token">
            <div className="token-title">
                <p>Token</p>
                <p>
                    Econ
                    <span className="token-title-om">om</span>
                    ic Mode
                    <span className="token-title-l">l</span>
                </p>
            </div>
            <p className="token-title-desc">{t('indexToken.title')}</p>
            <p className="token-coin">{t('indexToken.shui')}</p>
            <p className="token-coin-num">2,100,000,000 SHUI</p>
            <div className="token-distributed flex-center">
                {
                    data.map((item, index) => (
                        <div style={{ background: item.color, width: item.percentage }} key={index}></div>
                    ))
                }
            </div>
            <div className="token-project-table table">
                <div className="row head">
                    <div className="cell">{t('indexToken.project')}</div>
                    <div className="cell">{t('indexToken.assigned')}</div>
                    <div className="cell">{t('indexToken.percentage')}</div>
                    <div className="cell">{t('indexToken.other')}</div>
                </div>
                {
                    data.map((item, index) => (
                        <div className="row td-content" key={index}>
                            <div className="cell flex-center"><span style={{ background: item.color }}></span>{item.project}</div>
                            <div className="cell">{item.quantity}</div>
                            <div className="cell">{item.percentage}</div>
                            <div className="cell">{item.other}</div>
                        </div>
                    ))
                }
            </div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(Game)